<template>
  <view class="cardContent">
    <view v-if="show" class="cardBox">
      <view v-for="(item, index) in drawList" :key="index" :class="['card-item', `card-item-${index + 1}`]">
        <!-- 数组中存入index值时，将写有动画的class属性赋给标签，即开始播放动画 -->
        <view :class="['card', selectArr.includes(index) ? 'cardAnimate' : '']">
        </view>
        <view :class="['contxt', selectArr.includes(index) ? 'contxtAnimate' : '']">
          <view
              style="width:100%; height:100%;display: flex; flex-direction: column; justify-content: center;align-items: center">
            <image :src="item.name" mode="" style="width: 69px; height: 18px;margin-bottom: 10px"></image>
            <image :src="item.num" mode="" style="width: 18px; height: 35px"></image>
          </view>
        </view>
      </view>
    </view>

    <view class='btn-box'>
      <view class="oneKeyOpenClass" @click="openingBox">
        <image mode="" src="../../static/翻牌.png" style="width: 172px; height: 78px;"></image>
      </view>
      <view class="oneKeyOpenClass" @click="reset">
        <image mode="" src="../../static/重置.png" style="width: 172px; height: 78px;"></image>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      drawList: 5,
      openIndex: 1,
      selectArr: [],
      text: 0,
      show: true,
      p: ['../../static/何晴.png', '../../static/唐青平.png', '../../static/伍念秋.png', '../../static/徐淇.png',
        '../../static/杨依然.png'
      ],
      work: ['../../static/1.png', '../../static/2.png', '../../static/3.png', '../../static/4.png',
        '../../static/5.png'
      ]
    };
  },
  mounted() {
    uni.showLoading({
      title: '加载中'
    });
    uni.request({
      url: 'https://ex.tuzigo.com/getCode',
      success: (res) => {
        let resData = res.data.data;
        if (resData.length) {
          this.text = resData[0].code || 0
          this.drawList = this.getList()
          uni.hideLoading();
        }
      }
    });
  },
  methods: {
    shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    },
    getList() {
      if (this.text === this.openIndex) {
        let arr = [
          {
            name: '../../static/何晴.png',
            num: '../../static/2.png'
          }, {
            name: '../../static/唐青平.png',
            num: '../../static/1.png'
          }, {
            name: '../../static/徐淇.png',
            num: '../../static/3.png'
          }, {
            name: '../../static/伍念秋.png',
            num: '../../static/4.png'
          }, {
            name: '../../static/杨依然.png',
            num: '../../static/5.png'
          },
        ]
        return this.shuffleArray(arr)
      }
      let old_arr = this.work
      let newArr = [].concat(old_arr)
      let valArr = []
      this.p.forEach((item, index) => {
        let r = Math.floor(Math.random() * (newArr.length))
        valArr.push({
          name: item,
          num: newArr[r]
        })
        newArr.splice(r, 1)
      })
      return this.shuffleArray(valArr)
    },
    openingBox() {
      if (this.selectArr.length > 0) return
      for (let i = 0; i < 6; i++) {
        setTimeout(() => {
          this.selectArr.push(i);
        }, 200 + (i - 1) * 200);
      }
      this.openIndex++
    },
    reset() {
      if (this.selectArr.length === 0) return
      this.show = false
      this.$nextTick(() => {
        this.selectArr = []
        this.drawList = this.getList()
        this.show = true
      })
    }
  }
};
</script>
<style>
.btn-box {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 每张卡牌属性 */
.card-item {
  width: 212rpx;
  height: 252rpx;
  margin: 10rpx;
  border-radius: 10px;
  /* 文字居中 */
  line-height: 252rpx;
  text-align: center;
}

/* 翻转前 */
.card-item .card {
  width: 212rpx;
  height: 300rpx;
  border-radius: 10px;
  background-image: url("../../static/57f300b973869613915c1d419e55a98.png");
  background-size: cover;
}

/* 翻转后 */
.card-item .contxt {
  width: 212rpx;
  height: 300rpx;
  border-radius: 10px;
  backface-visibility: hidden;
  /* 定位于和翻转前相同的位置 */
  position: relative;
  top: -300rpx;
  left: 0;
  /* Y轴翻转180°，成卡牌效果*/
  transform: rotateY(180deg);
  opacity: 0;
  background-color: bisque;
  background-image: url("../../static/bg2.png");
  background-size: cover;
}

/*将每个卡牌进行定位*/
.card-item-1 {
  position: absolute;
  left: 20rpx;
  top: 200rpx;
  animation: issueCard1 1s;
}

.card-item-2 {
  position: absolute;
  left: 252rpx;
  top: 200rpx;
  animation: issueCard2 1s;
}

.card-item-3 {
  position: absolute;
  left: 484rpx;
  top: 200rpx;
  animation: issueCard3 1s;
}

.card-item-4 {
  position: absolute;
  left: 136rpx;
  top: 520rpx;
  animation: issueCard4 1s;
}

.card-item-5 {
  position: absolute;
  left: 368rpx;
  top: 520rpx;
  animation: issueCard5 1s;
}

/* 卡片翻牌 */
/* 背面 */
.cardAnimate {
  animation: rotetaCard 0.5s ease-in;
  animation-fill-mode: forwards;
}

/* 正面 */
.contxtAnimate {
  animation: contxtRotate 0.5s ease-in;
  animation-fill-mode: forwards;
}

/* 正面卡牌翻牌动画 */
@keyframes contxtRotate {
  from {
    transform: rotateY(180deg);
    opacity: 1;
  }

  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/* 背面卡牌翻牌动画 */
@keyframes rotetaCard {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(180deg);
  }
}

/* 每张卡牌发牌动画 */
@keyframes issueCard1 {
  0% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(0);
  }

  20% {
    transform: scale(1.2);
  }

  40% {
    transform: scale(1);
  }

  50% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  60% {
    position: fixed;
    left: 20rpx;
    top: 200rpx;
  }

  100% {
  }
}

@keyframes issueCard2 {
  0% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(0);
  }

  20% {
    transform: scale(1.2);
  }

  40% {
    transform: scale(1);
  }

  50% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  60% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  70% {
    position: absolute;
    left: 252rpx;
    top: 200rpx;
  }

  100% {
  }
}

@keyframes issueCard3 {
  0% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(0);
  }

  20% {
    transform: scale(1.2);
  }

  40% {
    transform: scale(1);
  }

  50% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  70% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  80% {
    position: absolute;
    left: 484rpx;
    top: 200rpx;
  }

  100% {
  }
}

@keyframes issueCard4 {
  0% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(0);
  }

  20% {
    transform: scale(1.2);
  }

  40% {
    transform: scale(1);
  }

  50% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  80% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  90% {
    position: absolute;
    left: 136rpx;
    top: 472rpx;
  }

  100% {
  }
}

@keyframes issueCard5 {
  0% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(0);
  }

  20% {
    transform: scale(1.2);
  }

  40% {
    transform: scale(1);
  }

  50% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  90% {
    position: fixed;
    top: 750rpx;
    left: 269rpx;
    transform: scale(1);
  }

  100% {
    position: absolute;
    left: 368rpx;
    top: 472rpx;
  }
}
</style>
